<template>
	<view class="pop-wp">
		<view class="shop-blck" @click.stop="clear"></view>
		<!-- 无规格弹框 -->
		<view class="pop-nr">
			<view class="title">
				<image :src="info.thumb" ></image>
				<view>
					<view class="jiage">￥{{info.saleprice}}</view>
					<view class="kucun">库存：{{info.total}}件</view>
				</view>
			</view>
			<view class="number">
				<view>购买数量</view>
				<view class="number-right">
					<view @click="num(0)">-</view>
					<input type="number" v-model="wunumber" @blur="numChange"/>
					<view @click="num(1)">＋</view>
				</view>
			</view>
			<view class="btn" @click="success0">
				立即购买
			</view>
			<view class="chahao" @click="clear">
				×
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				wunumber: 1,
				ok: '立即购买',
			}
		},
		props: ['info'],
		methods: {
			// 关闭弹出框
			clear() {
				console.log('点击关闭')
				this.$emit('tobuy');
			},
			numChange(e){
				if(e.detail.value<=1){
					this.wunumber = 1;
				}else{
					// 不限购 用户购买最大量
					// if(this.info.usermaxbuy==0){
					// 	this.wunumber = e.detail.value > Number(this.info.total) ? Number(this.info.total) : e.detail.value;
					// }else{
					// 	// 如果库存小于限购
					// 	if(this.info.total < this.info.usermaxbuy){
					// 		this.wunumber = Number(this.info.total)
					// 	}else{
					// 		this.wunumber = Number(this.info.usermaxbuy)
					// 	}
					// }
					// 单次购买最大量
					if(this.info.maxbuy==0){
						this.wunumber = e.detail.value > Number(this.info.total) ? Number(this.info.total) : e.detail.value;
					}else{
						// 如果库存小于限购
						if(this.info.total < this.info.maxbuy){
							this.wunumber = Number(this.info.total)
						}else{
							this.wunumber = Number(this.info.maxbuy)
						}
					}
				}
			},
			// 无规格加减数量
			num(e) {
				if (e == 0) {
					this.wunumber -= 1;
					this.wunumber = this.wunumber <= 1 ? 1 : this.wunumber;
					if (this.info.total == 0) {
						this.wunumber = 0;
					}
				} else {
					this.wunumber += 1;
					this.wunumber = this.wunumber >= Number(this.info.total) ? Number(this.info.total) : this.wunumber;
				}
			},
			// end
			// 无规格提交
			success0() {
				this.ok = this.info.total <= 0 ? '已售罄' : this.ok;
				if(this.info.maxbuy==0){
					if (this.wunumber - 0 > this.info.total) {
						uni.showModal({
							content: '您最多购买' + this.info.total + '件',
							showCancel: false
						})
					} else if (this.wunumber <= 0) {
						uni.showModal({
							content: '您最少购买1件',
							showCancel: false
						})
					} else {
						this.$emit('tobuyReal',this.wunumber)
					}
				}else{
					if(this.wunumber > Number(this.info.maxbuy)){
						uni.showModal({
							content: '您最多购买' + this.info.maxbuy + '件',
							showCancel: false
						})
					} else {
						this.$emit('tobuyReal',this.wunumber)
					}
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.pop-wp {
		width: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		position: fixed;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 999;
	}

	.pop-nr {
		width: 100%;
		background-color: #fff;
		padding-bottom: 80upx;
		position: absolute;
		bottom: 0;
		font-size: 28upx;
		color: #333;
		border-radius: 10upx;
		z-index: 1001;
	}

	.title {
		height: 200upx;
		display: flex;
		justify-content: center;
		align-items: flex-start;
		border-bottom: 1upx rgba(0, 0, 0, 0.2) solid;
	}

	.title image {
		width: 200upx;
		height: 200upx;
		position: relative;
		top: -20upx;
		margin: 0 30upx;
		// border: 1px rgba(0, 0, 0, 0.2) solid;
		border-radius: 12rpx;
	}

	.title view {
		flex: 1;
		color: #333;
		font-size: 24upx;
	}

	.title view .jiage {
		font-size: 28upx;
	}

	.title view .jiage,
	.title view .kucun {
		color: $bg-color;
		margin: 20upx 0;
	}

	.title view .kucun {
		color: #C0C4CC;
	}

	.guige-chima,
	.number {
		padding: 16upx 30upx 0;
		font-size: 26upx;
	}

	.guige-chima-titlt {
		font-size: 32upx;
	}

	.guige-chima-titlt-xuanze {
		width: 100%;
		margin: 10upx 0;
		padding: 10upx 0 10upx;
	}

	.guige-chima-titlt-xuanze view {
		display: inline-block;
		padding: 10upx 20upx;
		background-color: rgba(12, 12, 12, 0.1);
		margin: 0 0 20upx 20upx;
		border-radius: 35upx;
		box-sizing: border-box;
		border: 1upx #fff solid;
	}

	.guige-chima-titlt-xuanze .hui {
		color: #999;
	}

	.guige-chima-titlt-xuanze .xuan {
		background-color: rgba(250, 67, 106, 0.1);
		color: #fa436a;
	}

	.number {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 20upx;
	}

	.number-right {
		width: 200upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.number-right view,
	.number-right input {
		flex: 1;
		text-align: center;
		background-color: #DCDFE6;
		line-height: 40upx;
	}

	.number-right input {
		margin: 0 10upx;
	}

	.btn {
		height: 70upx;
		line-height: 70upx;
		text-align: center;
		color: #fff;
		margin: 20upx auto;
		border-radius: 60upx;
		width: 460rpx;
		// background: linear-gradient( 90deg, #A14FE7 0%, #510AAB 100%);
		background: linear-gradient(90deg, #FE6035, #EF1224);
	}

	.chahao {
		font-size: 28upx;
		color: #C0C4CC;
		border: 1px #C0C4CC solid;
		width: 40upx;
		line-height: 40upx;
		border-radius: 50%;
		text-align: center;
		position: absolute;
		top: 20upx;
		right: 20upx;
		z-index: 1;
	}

	.xuan-guige {
		max-height: 420upx;
	}

	.shop-blck {
		position: fixed;
		width: 100%;
		height: 100%;
		z-index: 0;
		left: 0;
		top: 0;
	}
</style>
